<template>
  <div class="update">
    <!-- 输入密码 -->
    <van-field  type="text" label="换绑" placeholder="请输入新手机号" v-model="farePhone" v-on:input="checkInput111"/>
<!--    <div>-->
<!--      <van-button type="primary" @click="sendVerificationCode">发送验证码</van-button>-->
<!--    </div>-->
    <van-button type="primary" size="large" @click="findPhone" class="button1234">确认</van-button>

    <BottomPanel/>
  </div>
</template>

<script>
import BottomPanel from "@/views/bottomPanel.vue";
import {updatePhone} from "@/api/personal/personal";
// import axios from 'axios';
export default {
  data() {
    return {
      passengerId: 1,
      farePhone: '',
    }
  },
  methods: {
    checkInput111() {
      const inputValue = this.farePhone;
      const chineseRegex = /[\u4e00-\u9fa5]/;
      if (chineseRegex.test(inputValue)) {
        // 如果输入内容包含汉字，给出提示并清空输入框
        this.$toast.fail('不能输入汉字');
        this.farePhone = '';
      }
    },
    findPhone() {
      console.log(this.passengerId)
      console.log(this.farePhone)
      //判断输入的手机号格式是否正确
      const phoneRegex = /^1[3456789]\d{9}$/;
      if (!phoneRegex.test(this.farePhone)) {
        return this.$toast.fail('手机号格式不正确');
      }
      if (this.farePhone == ''||this.farePhone == '') {
        return this.$toast.fail('手机号不能为空');
      }
      updatePhone(this.passengerId, this.farePhone).then(res => {
        this.passengerId = 1
        //判断手机号是否正确
        this.farePhone = res.farePhone;
      })
      this.$router.push({path: '/personalHome'})
    },
    //发送验证码
    // sendVerificationCode() {
    //   const phoneNumber = 'your_phone_number';
    //   axios.post('/sms/sendVerificationCode', {phoneNumber})
    //       .then((response) => {
    //         console.log('验证码已发送', response.data);
    //       })
    //       .catch((error) => {
    //         console.error('发送验证码失败', error);
    //       });
    // },

    components: {BottomPanel},
  }
}
</script>


<style>
.update{
  width: 100%;
  height: 100vh;
}
</style>